<template>
  <div class="register-form">
    <Form
      ref="formRegister"
      :model="formRegister"
      :rules="ruleRegister"
      :label-width="80"
      class="register-form__main"
    >
      <FormItem label="用户名" prop="userName">
        <i-input
          type="text"
          v-model="formRegister.userName"
          placeholder="Username"
        >
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </i-input>
      </FormItem>
      <FormItem label="头像URL" prop="avatarImgUrl">
        <i-input v-model="formRegister.avatarImgUrl" type="text"></i-input>
        <div class="avatar-preview">
          <TransitionFade>
            <img
              :key="formRegister.avatarImgUrl"
              :src="formRegister.avatarImgUrl"
              alt="Avatar"
            />
          </TransitionFade>
          <p>Avatar Preview</p>
        </div>
        <ImageSelect
          @img-clicked="handleImageSelected"
          :imageList="avatarLists"
        />
      </FormItem>

      <FormItem class="register-btn-item">
        <Button type="primary" @click="handleRegisterSubmit()">Register</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'
import { RegisterInput } from '@/types'

import { playerModule, windowModule } from '@/store'
import ImageSelect from '@/components/ImageSelect.vue'
import { isThis } from '../types/Errors'

type LoginModeType = 'login' | 'register'

@Component({
  components: {
    ImageSelect
  }
})
export default class RegisterForm extends Vue {
  private avatarLists = [
    'https://i.loli.net/2019/10/19/D1p7WaLzu5UnER8.png',
    'https://i.loli.net/2019/11/11/zPo8etSFUx1OTyc.jpg',
    'https://i.loli.net/2019/11/11/uBbPQ1zoytrJO5w.jpg',
    'https://i.loli.net/2019/11/11/m9wdk6KohNxMRSj.png'
  ]

  private formRegister = {
    userName: '',
    avatarImgUrl: this.avatarLists[0]
  }

  private ruleRegister = {
    userName: [{ type: 'string', required: true }],
    avatarImgUrl: [{ type: 'url', required: true }]
  }

  private loginMode: LoginModeType = 'login'

  async registerSubmit() {
    let data = await playerModule.register({
      input: {
        playerName: this.formRegister.userName,
        characterImageUrl: this.formRegister.avatarImgUrl
      },
      graphqlClient: this.$apollo.getClient()
    })

    // jump to other route
    this.$router.push({
      name: 'register',
      params: {
        registerLoginToken: data.loginToken
      }
    })
  }

  handleImageSelected(idx: number) {
    this.formRegister['avatarImgUrl'] = this.avatarLists[idx]
  }

  handleRegisterSubmit() {
    // @ts-ignore
    this.$refs['formRegister'].validate(valid => {
      if (valid) {
        this.registerSubmit()
          .then(() => {
            this.$Message.success('注册成功!')
          })
          .catch(err => {
            isThis(err)
              .InternalError(() => {
                this.$Message.error(err.message)
              })
              .handle()
          })
      } else {
        this.$Message.error('提交失败!')
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/styles/general.scss';

.register-form {
  display: flex;
  justify-content: center;
  width: 60%;

  @media screen and (max-width: $size-sm) {
    width: 80%;
  }

  &__main {
    width: 100%;
  }
}

.register-btn-item {
  display: flex;
  justify-content: center;
}

.avatar-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;

  & > img {
    width: 64px;
    height: 64px;
  }

  & > p {
    font-size: 0.7rem;
    color: gray;
  }
}
</style>

<style lang="scss">
.register-form {
  &__main {
    div.ivu-form-item {
      label.ivu-form-item-label {
        text-align: left;
      }

      div.ivu-form-item-content {
        margin-left: 0px !important;
      }
    }
  }
}
</style>
